<template>
	<view>
		<billPicker ref="refBillPicker" title="备货单号" @confirm="onConfirmBill" rangeKey="ship_id" :rangeSource="{ apiMethod: 'getshipidpage', params: {} }"></billPicker>

		<view class="cu-form-group ">
			<view class="title">栈 板号</view>
			<input placeholder="" :disabled="true" :value="zbNum" name="input" />
		</view>

		<!-- <view class="cu-form-group margin-top">
			<view class="title">输入</view>
			<input placeholder="输入扫码信息" v-model="todoNum" @confirm="onConfirmTodo" name="input" />
		</view> -->
		<todo-input v-model="todoNum" @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>
		

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text>
				清单列表
			</view>
		</view>
		<!-- todolist -->
		<todo-list-view :top="460" class="cu-list menu">
			<view v-for="(item, idx) in todoList" class="cu-item">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-formfill text-blue margin-right-xs"></text>
						<text>订单号:</text>
						{{ item.so_no }}
					</view>
					<view class="text-gray text-sm">
						<text class="lg text-gray cuIcon-settingsfill"></text>
						<text>料号:</text>
						{{ item.part_id }}
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">
						<text class="text-gray">品名:</text>
						<text class="text-gray">{{ item.part_name }}</text>
					</view>
					<view class="text-gray  text-xs">
						<text class="text-gray">计划数量({{ item.plan_qty }})</text>
						<text class="text-gray">实际数量({{ item.act_qty }})</text>
					</view>
				</view>
			</view>
		</todo-list-view>

		<view class="cu-bar tabbar bg-white shadow foot foot-btn-group">
			<button class="cu-btn bg-white" @tap="onCancelDB">取消发货</button>
			<button class="cu-btn bg-white" @tap="onCloseDB">发货完成</button>
		</view>

		<bill-prompt ref="refCancelPrompt" @confirm="onCancelConfirm" title="取消发货"></bill-prompt>
	</view>
</template>

<script>
	import api from '@/serveices/wms-api.js';
	import billPicker from './bill-picker.vue';
	import billPrompt from './bill-prompt.vue'
	import todoInput from './todo-input.vue';
	import util from '@/serveices/util.js';
	import todoListView from './todo-list-view.vue';
	export default {
		components: {
			billPicker,
			todoInput,
			todoListView,
			billPrompt
		},
		data() {
			return {
				bill: '',
				zbNum: '',
				todoNum: '',
				todoFocus: true,
				todoList: []
			};
		},
		methods: {
			onTodoFocusChange(focus) {
				this.todoFocus = focus
			},
			onConfirmBill({
				bill
			}) {
				api.getshipdetail(bill).then(res => {
					this.todoList = res.data;
					if (res.data.length) {
						var row = res.data[0];
						this.bill = bill
						this.$refs.refBillPicker.setValue(bill);
						this.$refs.refBillPicker.lock()
					}else{
						this.$refs.refBillPicker.clear()
					}
				}).catch(err=>{
					this.$refs.refBillPicker.clear()
				}).finally(()=>{
					this.todoNum=''
					this.todoFocus = true
				})
			},

			onConfirmTodo() {
				api.shipoperation({
					opType: 'SHIP',
					billId: this.bill,
					scanInfo: this.todoNum
				}).then(res => {
					this.todoList = res.data
					this.zbNum = this.todoNum
					util.playSuccess()
				}).catch(err => {
					util.playFailed()
				}).finally(() => {
					this.todoNum=''
					this.todoFocus = true
				})
			},
			onCancelDB() {
				this.$refs.refCancelPrompt.show();
			},
			onCancelConfirm(scanInfo) {
				this.$refs.refCancelPrompt.hide()
				api.shipoperation({
					opType: 'CLOSED',
					billId: this.bill,
					scanInfo: scanInfo
				}).then(res => {
					if (this.bill) {
						// 刷新页面
						this.onConfirmBill({
							bill: this.bill
						})
					} else {
						uni.showToast({
							title: '取消成功'
						})
					}
					util.playSuccess()
				}).catch(err => {
					util.playFailed()
				}).finally(() => {
					this.todoNum=''
					this.todoFocus = true
				})
			},
			onCloseDB() {
				api.shipoperation({
					opType: 'CLOSED',
					billId: this.bill,
					scanInfo: ''
				}).then(res => {
					//清空页面
					this.todoList = []
					this.todoNum = ''
					this.$refs.refBillPicker.clear()
					this.todoFocus = true
				});
			}
		}
	};
</script>

<style></style>
